import { ref, onMounted, onUnmounted } from 'vue'
import { debounce } from '@/utils'

export default function useResize(cb) {
  const width = ref(0)
  const height = ref(0)

  let fn = undefined
  if(typeof cb === 'function') {
    fn = debounce(cb, 300)
  }

  function Resize() {
    width.value = window.innerWidth
    height.value = window.innerHeight
    fn && fn()
  }

  onMounted(() => {
    window.addEventListener('resize', Resize)
    Resize()
  })

  onUnmounted(() => {
    window.removeEventListener('resize', Resize)
  })

  return {
    width,
    height
  }
}